<template>
	<view>
		<view class="main">
			<view v-for="(l,index) in List" :key="index" class="block">
				<text class="name">{{index}}</text>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List: [],
				loadingText:'正在加载中...'
			}
		},
		onShow:function(){
			this.init()
			
			this.$setTitle("Happy先生·产品列表")
		},
		onLoad:function(options){
			this.init()
		},
		onReachBottom:function(){
			this.continueInit()
		},
		methods: {
			init() {
				this.List=[];
				for (let a = 0; a < 10; a++) {
					this.List.push(a);
				}
			},
			continueInit(){
				let list = this.List;
				if(list.length>=40){
					this.loadingText="我是有底线的";
					return;
				}
				this.loadingText="正在加载中...";
				let timer = setTimeout(()=>{
					for (let a = 0; a < 10; a++) {
						list.push(a);
					}
					this.List = list;
				},1500);
			}
		}
	}
</script>

<style scoped="" lang="scss">
	.main {
		display: flex;
		width: 92%;
		padding: 20upx 4%;
		justify-content: space-between;
		flex-wrap: wrap;

		.block {
			background-color: #ddd;
			width: 48%;
			height: 300upx;
			margin: 0 0 10upx 0;
			box-shadow: 0 5upx 25upx rgba(0, 0, 0, 0.1);
			text-align: center;
			.name{
				
			}
		}
		.loading-text{
			width: 100%;
			display: flex;
			justify-content: center;
			align-content: center;
			height: 60upx;
			color: aqua;
			font-size: 24upx;
		}
	}
</style>
